<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>添加模块</title>
  <link rel="stylesheet" th:href="@{/webjars/layui/2.5.7/css/layui.css}">
</head>
<body>
<div class="layui-layout layui-layout-admin">

  <div th:replace="layout::header"></div>
  <div th:replace="layout::side"></div>

  <div class="layui-body">

    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
      <legend>添加模块</legend>
    </fieldset>

    <!--表单-->
    <form class="layui-form" action="" enctype="multipart/form-data">
      <div class="layui-form-item">
        <label class="layui-form-label">模块名</label>
        <div class="layui-input-block">
          <input type="text" id="name" required  lay-verify="required" placeholder="请输入模块名" autocomplete="off" class="layui-input">
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-upload">
          <button type="button" class="layui-btn" id="uploadFile">上传图片</button>
          <div class="layui-upload-list">
            <img class="layui-upload-img" id="preview">

          </div>
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-input-block">
          <button class="layui-btn" id="uploadBtn" onclick="return false">提交</button>
          <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
      </div>
    </form>

  </div>
</div>

  <script th:src="@{/webjars/layui/2.5.7/layui.js}"></script>
  <script th:src="@{/webjars/jquery/3.3.1/jquery.js}"></script>
  <script>
    layui.use('upload', function(){
      var upload = layui.upload;
      //执行实例
      var uploadInst = upload.render({
        elem: '#uploadFile' //绑定元素
        ,url: '/admin/insertModule' //上传接口
        ,auto: false    //不自动上传
        ,bindAction: '#uploadBtn'
        ,method: 'POST'
        ,before: function (obj){
          this.data.moduleName = $('#name').val();
          layer.msg('上传中', {
            icon: 16,
            shade: 0.01
          }); //上传loading
          //预读本地文件示例，不支持ie8
          obj.preview(function(index, file, result){
            $('#preview').attr('src', result); //图片链接（base64）
          });
        }
        ,done: function(res){
          //上传完毕回调
          if(res.code === 200){
            $('#preview').attr('src', res.data); //图片链接（base64）
            return layer.msg('上传成功');
          }
          else{
            return alert("上传失败")
          }
        }
        ,error: function(){
          //请求异常回调
        }
      });
    });
  </script>

</body>
</html>